<template>
  <view class="p-cinema-seat">
    <CHeader :title="title" background="none"></CHeader>
    <view class="checked-list">
      <view class="checked-item" v-for="(label, i) in ['已选', '已售', '不可选']" :key="label">
        <nut-icon :name="i == 0 ? 'checklist' : ''" size="16" color="white" :class="'checked-icon' + i"></nut-icon>
        {{ label }}
      </view>
    </view>
    <CSeat :rowNo="seat.rowNo" :columnNo="seat.columnNo" :list="seat.list"></CSeat>
    <view class="bottom-panel">
      <view class="seat-panel">
        <view class="movie-name">人生大事</view>
        <view class="movie-desc">07月10日 20:25-22:52 英语 3D</view>
        <view class="seat-list">
          <view class="seat-item">
            <view class="seat-name">5排8座</view>
            <view class="seat-price"> ¥32</view>
            <nut-icon name="close-little" size="8" class="close-icon"></nut-icon>
          </view>
        </view>
      </view>
      <view class="sold-btn">确认选座</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useDidShow } from '@tarojs/taro'
import CHeader from '@/components/c-header'
import CSeat from '@/components/c-seat'

import { getSeatsBySectionId } from '@/api/seaction.seat'

const title = ref('店有米智能')
const seat = ref({})
const getSectionSeat = async id => {
  const { data } = await getSeatsBySectionId({ id })
  seat.value = data.seat
  console.log(seat.value)
}
useDidShow(() => {
  getSectionSeat(54)
})
</script>

<style lang="scss">
@import '@/assets/styles/custom_theme.scss';
page {
  background: $bg-color;
}
.p-cinema-seat {
  .checked-list {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
    .checked-item {
      display: flex;
      align-items: center;
      padding-right: 10px;
      font-size: 12px;
      color: $text-color;
      .checked-icon0,
      .checked-icon1,
      .checked-icon2 {
        margin: 0 5px;
        border-radius: 5px;
        background: #ee4069;
      }
      .checked-icon1 {
        background: #faab23;
      }
      .checked-icon2 {
        background: $disable-color;
      }
    }
  }

  .bottom-panel {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 20px;
    .seat-panel {
      margin: 10px;
      padding: 16px;
      box-sizing: border-box;
      border-radius: 10px;
      background: white;
      .movie-name {
        font-size: 16px;
        font-weight: bold;
        color: $title-color;
      }
      .movie-desc {
        font-size: 12px;
        line-height: 24px;
        color: $text-color;
      }
      .seat-list {
        display: flex;
        align-items: center;
        margin-top: 10px;
        .seat-item {
          position: relative;
          padding: 8px 14px;
          border-radius: 6px;
          background: #f1f3f6;
          .seat-name {
            font-size: 12px;
            color: $title-color;
          }
          .seat-price {
            font-size: 12px;
            color: $price-color;
            &::first-letter {
              font-size: 10px;
            }
          }
          .close-icon {
            position: absolute;
            top: -1px;
            right: -1px;
            color: $text-color2;
          }
        }
      }
    }
    .sold-btn {
      color: white;
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      margin: 10px;

      border-radius: 20px;
      background: $primary-btn-bg-color;
      &:active {
        background: pink;
      }
    }
  }
}
</style>
